iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
自我挑戰組

30天後能否自己做出一個簡單便利的訂便當系統(HTML、CSS、BootStrap、PHP、SQL、JavaScrip、JQuery)系列 第 8

鐵人賽 Day8 -- 一定要知道的 CSS (五) - align & 如何使 ''Div'' 區塊 置中對齊

  • 分享至 

  • xImage
  •  

前言

align 主要是以交錯軸為主,而昨天的 ustify-content 則是以主軸為主
https://ithelp.ithome.com.tw/upload/images/20210908/20141189dbjsQFmwWr.png

align-content

使用 align-content 前要先使用 flex-wrap:wrap; 才有辦法使用 align-content

  • align-content: start; 交錯軸線最前端
<?php
    display: flex;
    flex-wrap: wrap;
    align-content: start;
?>
  • align-content: center; 交錯軸線中間
<?php
    display: flex;
    flex-wrap: wrap;
    align-content: center;
?>
  • align-content: end; 交錯軸線最末端
<?php
    display: flex;
    flex-wrap: wrap;
    align-content: end;
?>
  • align-content: space-between; 第一行與最後一行分別對齊交錯軸線最前端與最末端.
<?php
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
?>

https://ithelp.ithome.com.tw/upload/images/20210908/20141189VhITzW3xOf.jpg

  • align-content: space-around; 每行平均分配每行間距
<?php
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
?>

https://ithelp.ithome.com.tw/upload/images/20210908/20141189uiVab0Rzbf.jpg

align-items

  • align-items: flex-start; 交錯軸線最前端
<?php
    display: flex;
    align-items: flex-start;
?>

https://ithelp.ithome.com.tw/upload/images/20210908/20141189paTtnMB2TH.jpg

  • align-items: center; 交錯軸線中間
<?php
    display: flex;
    align-items: flex-center;
?>

https://ithelp.ithome.com.tw/upload/images/20210908/20141189L31HRVTlB5.jpg

  • align-items: flex-end; 交錯軸線最末端
<?php
    display: flex;
    align-items: flex-end;
?>

https://ithelp.ithome.com.tw/upload/images/20210908/201411891UViWewuYr.jpg

align-self

屬性與 align-items 一樣,只是 align-self 是當我們使用 align-item 後,用來個別調整子元素 的對其位置
那這邊的我就放圖了,主要就是當今天我們全部元素的位置一次調整完成後,不想動到其他子元素時,就使用 align-self 去調整成其他對齊方式

  • flex-start
  • center
  • flex-end

如何讓 Div 垂直置中對齊

很簡單,只需要使用昨天的 justify-content 和今天的 align-items就可以完成啦
先附上程式碼 & 成果
https://ithelp.ithome.com.tw/upload/images/20210908/20141189vHXysoknag.jpg

CSS

<?php
.aaa{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 300px;
   height: 300px;
   border: 2px solid #000;
}
.bbb{
   width: 150px;
   height: 150px;
   background: rgb(81, 255, 1);
}
?>

html

<div class="aaa">
    <div class="bbb">
    </div>
</div>

最重要的搞清楚主軸和交錯軸之後,要讓Div在哪他就會在哪裡啦
那我們鐵人賽Day9見囉!


上一篇
鐵人賽 Day7 -- 一定要知道的 CSS (四) -Justify-content
下一篇
鐵人賽 Day9 -- 一定要知道的 CSS (六) -- background-color/background-image
系列文
30天後能否自己做出一個簡單便利的訂便當系統(HTML、CSS、BootStrap、PHP、SQL、JavaScrip、JQuery)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言